{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '编辑器:example/editor/index', 'tinymce'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">富文本编辑器 tinymce</div>
        </header>
        <div class="card-body">
        
          <form action="#!" method="post" id="example-from">
          <div class="mb-3">
            <textarea id="testtextarea"></textarea>
          </div>
        </form>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    var myLayerIndex;
    function open_image(){
        myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=receiveDataForEditor&multiple=1", function (){});
    }
    function receiveDataForEditor(url){
        $('.tox-dialog-wrap').remove();
        layer.close(myLayerIndex);
        var arr = url.split(',');
        var dom = '';
        for (var i = 0; i < arr.length; i++) {
            dom += '<p><img src="' + arr[i] + '"><br></p>';
        }
        tinymce.editors['testtextarea'].insertContent(dom);
    }
    $(document).ready(function(){
        tinymce.init({
            selector: '#testtextarea',
            language: 'zh_CN',
            directionality: 'ltl',
            browser_spellcheck: true,
            contextmenu: false,
            height: 480,
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table paste imagetools wordcount",
                "code"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
            images_upload_url: './data/upload.php?type=tinymce', // 后端返回的json格式{ location : "/demo/image/1.jpg" }
            setup: function (editor) {
                editor.on('init', function (e) {
                    $('button[aria-label="插入/编辑图片"]').on('click', function(){
                        setTimeout(function(){
                            var dom = `<div class="tox-dialog__body-nav-item tox-tab" onclick="open_image();">上传</div>`;
                            $('.tox-dialog__body-nav div').eq(1).replaceWith(dom);
                        }, 300);
                    })
                });
            }
        });
    });
    </script>